<template>
	<view class="u-p-r-20 u-p-l-20 u-p-t-30">
		<u-navbar>
			<view style="display: flex;justify-content: center;align-items: center; padding-left: 30rpx;">
				<!-- <view class="u-p-20" @click="location">
					{{ vuex_city == '' ? '选择' : vuex_city }}
					<u-icon name="arrow-down-fill" class="u-p-l-10" color="#515356"></u-icon>
				</view> -->
				<!-- #ifdef MP-WEIXIN -->
				<view class="navtitle">
					支付订单
				</view>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<!-- <u-search placeholder="你想住在哪儿" v-model="keyword" input-align="center" :show-action="false"
					:clearabled="true" :disabled="true" style="width: 580rpx;" @click="search"></u-search> -->
				<!-- #endif -->
			</view>
		</u-navbar>
		<view class="pay">
			<view class="title">
				<view class="l">
					支付金额
				</view>
				<view class="r">
					支付剩余时间：
					<text>{{ time.hour }}:{{ time.min }}:{{ time.sc }}</text>
				</view>
			</view>
			<view class="money">
				￥580.00
			</view>
		</view>
		<view class="choose">
			选择支付方式
		</view>
		<view class="moneycome">
			<view v-for="(item, i) in lest" class="moneycome_item">
				<view class="radio-content" @click="chooseRadio(i)">
					<u-row>
						<u-col span="9">
							<view class="flex">
								<image :src=item.logo class="icon"></image>
								<view>{{ item.name }}</view>
							</view>
						</u-col>
						<u-col span="3">
							<view class="radio" :class="item.pick ? 'radio-default' : ''" style="margin-top:45rpx">
								<view :class="item.pick ? 'radio-active' : ''"></view>
							</view>
						</u-col>
					</u-row>
				</view>
				<view v-if="i !== 2">
					<u-line color="#e4e7ed" />
				</view>
			</view>
		</view>
		<view class="foot">
			<view class="pbtn" @click.stop="finishPay()">
				确认支付
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			radio: true,
			time: {
				hour: '01',
				min: '06',
				sc: '09'
			},
			lest: [{
				name: '支付宝',
				logo: '/static/img/pay/zhifu',
				id: 1,
				img: '',
				pick: true
			}, {
				name: '微信',
				logo: '/static/img/pay/weixin',
				id: 2,
				img: '',
				pick: false
			}, {
				name: '招商银行卡',
				logo: '/static/img/pay/zhaoshang',
				id: 3,
				img: '',
				pick: false
			}]
		}
	},
	methods: {
		finishPay(){
			this.$u.route({
				url: 'pages/housekeeperOrder/finishPay'
			})
		},
		chooseRadio(i){
			for(let l = 0; l < this.lest.length; l++){
				this.$set(this.lest[l], 'pick', false)
			}
			this.$set(this.lest[i], 'pick', true)
		}
	}
}
</script>

<style lang="scss" scoped>
.foot {
	height: 150rpx;
	display: flex;
	flex-direction: column;
	background-color: white;
	padding-top: 20rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
}

.pbtn {
	margin:0 20rpx;
	height: 70rpx;
	line-height: 65rpx;
	// width: 160rpx;
	padding-left: 30rpx;
	padding-top: 0rpx;
	padding-right: 30rpx;
	display: inline-block;
	white-space: nowrap;
	border-radius: 26rpx;
	font-size: 26rpx;
	text-align: center;
	color: white;
	background-color: #6c76f4;
	border: 2rpx solid #6c76f4;
}

.navtitle {
	font-size: 40rpx;
}

.flex {
	display: flex;
}

.pay {
	background-color: white;
	border-radius: 20rpx;

	.title {
		display: flex;
		line-height: 50rpx;
		padding: 30rpx;

		.l {
			width: 45%;
			font-size: 40rpx;
		}

		.r {
			display: flex;
			text-align: right;
			width: 55%;
			font-size: 30rpx;
			float: right;

			text {
				text-align: right;
				float: right;
				color: #6d77f4;
			}
		}
	}

	.money {
		padding: 20rpx;
		font-size: 60rpx;
		color: #fc8881;
	}

	.logo {
		width: 30rpx;
		height: 30rpx;
	}
}

.choose {
	height: 100rpx;
	line-height: 100rpx;
	color: gray;
}

.moneycome {
	background-color: white;
	border-radius: 20rpx;

	.moneycome_item {
		height: 120rpx;
	}

	.radio-content {
		height: 120rpx;
		align-items: center;
		width: 100%;
		line-height: 120rpx;

		.icon {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.radio {
		float: right;
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		border: 2rpx solid #cccccc;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 0rpx 26rpx 0rpx 15rpx;
	}

	.radio-active {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background-color: #6d77f4;
	}

	.radio-default {
		border: 2rpx solid #6d77f4;
	}
}
</style>
